<script setup lang='ts'>
import { ref, reactive } from 'vue'
import domToImage from "dom-to-image";
import { useCanvasStore } from '@/stores/index'
import { storeToRefs } from 'pinia';
const { canvasDom } = storeToRefs(useCanvasStore())
// const canvasData=ref('')
function palGradientGap() {
  const node = canvasDom.value
  domToImage.toPng(node)
    .then((dataUrl: string) => {
      var img = new Image()
      img.src = dataUrl;
      img.style.width = '1000px'
      img.style.height = '600px'
      img.style.position = 'absolute '
      img.style.left = '50%'
      img.style.top = '50%'
      img.style.marginLeft = '-500px '
      img.style.marginTop = '-280px '
      img.style.border = '1px solid yellow '
      img.style.backgroundColor = "#e2e2e2e2"
      img.style.zIndex = '999'
      document.body.appendChild(img);
      document.addEventListener(' keydown ', function (e) {
        if (e.keycode == 27) {
          img.remove();
        }
      })
    })
    .catch((error: string) => {
      console.log('错误', error);

    })
}
</script>

<template>
  <div class="csn" @click="palGradientGap">预览效果</div>
</template>

<style lang='scss' scoped>
.csn {
  font-size: 16px;
}
</style>